@page "{type}"
@model OrderModel
@{
ViewData["Title"] = "导游通订单";
Layout = AdminLayout.Pjax(HttpContext);
}
<div id="container">
    <div class="list-wall">
        <div class="layui-form list-search" style="margin-top:10px;">
            <div class="layui-inline">
                <input class="layui-input" id="key" autocomplete="off" placeholder="请输入关键字查询">
            </div>
            <div class="layui-inline">
                <input class="layui-input" id="time" style="width:220px;" autocomplete="off" placeholder="请选择服务日期">
            </div>
            <div class="layui-inline">
                <select id="types" lay-search="">
                    <option value="">全部区域</option>
                    <option value="1">国内服务</option>
                    <option value="2">国际服务</option>
                </select>
            </div>
            <div class="layui-inline">
                <select id="attr" lay-search="">
                    <option value="">服务类型</option>
                    <option value="1">接机服务（导游专属）</option>
                    <option value="2">送机服务（导游专属）</option>
                    <option value="3">接机服务（Vip）</option>
                    <option value="4">送机服务（Vip）</option>
                    <option value="5">接机服务（登机口）</option>
                    <option value="6">送机服务（登机口）</option>
                    <option value="7">安检通道</option>
                    <option value="8">贵宾休息室</option>
                </select>
            </div>
            <div class="layui-inline">
                <select id="status" lay-search="">
                    <option value="">订单状态</option>
                    <option value="1">已提交</option>
                    <option value="2">服务中</option>
                    <option value="3">已完成</option>
                    <option value="4">已退款</option>
                </select>
            </div>
            <button type="button" class="layui-btn layui-btn-sm" data-type="toolSearch"><i
                    class="layui-icon layui-icon-search"></i> 搜索</button>
        </div>
        <table class="layui-hide" id="tablist" lay-filter="tool"></table>
    </div>
    <div class="tg_info" id="papp" style="display: none;">
        <div class="printHtml">
            <table class="layui-table">
                <tr>
                    <th colspan="4" style="text-align:center">
                        <h4 style="font-size: 16px;">{{m.serverName}}</h4>
                    </th>
                </tr>
                <tr>
                    <td>会员：</td>
                    <td>{{m.member.nickName}}</td>
                    <td>手机号码：</td>
                    <td>{{m.member.mobile}}</td>
                </tr>
                <tr>
                    <td>服务区域：</td>
                    <td>{{m.types==1?"国内服务":"国际服务"}}</td>
                    <td>订单状态：</td>
                    <td>{{m.serviceStatus}}</td>
                </tr>
                <tr>
                    <td>服务日期：</td>
                    <td>{{m.serviceData}}</td>
                    <td>航班号：</td>
                    <td>{{m.flightNumber}}</td>
                </tr>
                <tr>
                    <td>起飞时间：</td>
                    <td>{{getTime(m,1)}}</td>
                    <td>落地时间：</td>
                    <td>{{getTime(m,2)}}</td>
                </tr>
                <tr>
                    <td>人数：</td>
                    <td>{{m.peopleNumber}}</td>
                    <td>价格：</td>
                    <td>{{m.price}}</td>
                </tr>
                <tr v-for="item in m.contactUs">
                    <td>联系人：</td>
                    <td>{{item.name}}</td>
                    <td>联系方式：</td>
                    <td>{{item.phone}}</td>
                </tr>
                <tr>
                    <td>司机电话：</td>
                    <td>{{m.driverPhone}}</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>退款状态：</td>
                    <td>{{m.backStatus?"已退款":""}}</td>
                    <td>退款原因：</td>
                    <td>{{m.backSummary}}</td>
                </tr>
                <tr>
                    <td>备注：</td>
                    <td>{{m.summary}}</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr v-if="m.imageList.length>0">
                    <td>图片：</td>
                    <td colspan="3">
                        <div v-for="it in m.imageList"
                            style="width: 80px; height: 80px; padding: 4px; border: 1px solid #EBEEF5; border-radius: 3px; overflow: hidden; display: inline-block; margin-right: 15px;">
                            <a :href="it.url" target="_blank" title="点击查看大图"><img :src="it.url"
                                    style="width: 80px; height:80px" /></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" style="text-align: right;">下单时间：{{m.addTime}}</td>
                </tr>
            </table>
        </div>
        <div style="text-align: center" v-if="m.serviceStatus!='已提交'">
            <button type="button" class="layui-btn layui-btn-sm tgPrint"><i class="layui-icon layui-icon-print"></i>
                打印</button>
        </div>
    </div>
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button type="button" class="layui-btn layui-btn-sm" lay-event="toolAccept"><i class="layui-icon layui-icon-rate-solid"></i> 接受服务</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-event="toolSuccess"><i class="layui-icon layui-icon-ok-circle"></i> 完成订单</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-event="toolBack"><i class="layui-icon layui-icon-refresh-1"></i> 订单退款</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-event="toolDelete"><i class="layui-icon"></i> 删除订单</button>
        </div>
    </script>
    <script>
        var vm = new Vue({
            el: '#papp',
            data: {
                m: { member: { nickName: '', mobile: '' }, mold: 0, serviceStatus: '已提交' }
            },
            methods: {
                getTime(m, type) {
                    if (type == 1) {
                        if (m.mold == 2 || m.mold == 4 || m.mold == 5 || m.mold == 7 || m.mold == 8) {
                            return m.takeOffTime;
                        }
                    }
                    if (type == 2) {
                        if (m.mold == 1 || m.mold == 3 || m.mold == 5) {
                            return m.landTime;
                        }
                    }
                }
            }
        });
        layui.config({
            base: '/themes/js/modules/'
        }).use(['table', 'layer', 'jquery', 'common', 'laydate', 'form'],
            function () {
                var table = layui.table,
                    layer = layui.layer,
                    $ = layui.jquery,
                    os = layui.common,
                    form = layui.form,
                    laydate = layui.laydate;
                laydate.render({
                    elem: '#time'
                    , theme: '#393D49'
                    , format: 'yyyy/MM/dd'
                    , range: true
                });
                form.render("select");
                table.render({
                    elem: '#tablist',
                    toolbar: '#toolbar',
                    headers: os.getToken(),
                    url: '/api/tourguide/list',
                    cols: [
                        [
                            { type: 'checkbox', fixed: 'left' },
                            { field: 'number', width: 180, title: '订单号', fixed: 'left' },
                            {
                                field: 'MemberGuid', width: 160, title: '会员', fixed: 'left', templet: function (d) {
                                    return d.member.nickName + '_' + d.member.mobile
                                }
                            },
                            {
                                field: 'types', width: 100, title: '区域', templet: function (d) {
                                    if (d.types == 1) {
                                        return "国内服务";
                                    } else {
                                        return "国际服务";
                                    }
                                }
                            },
                            {
                                field: 'mold', width: 150, title: '服务类型', templet: function (d) {
                                    var str = '';
                                    switch (d.mold) {
                                        case 1: str = '普通接送-接机服务'; break;
                                        case 2: str = '普通接送-送机服务'; break;
                                        case 3: str = 'VIP接送=接机服务'; break;
                                        case 4: str = 'VIP接送=送机服务'; break;
                                        case 5: str = '登机口接送-接机服务'; break;
                                        case 6: str = '登机口接送-送机服务'; break;
                                        case 7: str = d.types == 1 ? '安检快速通道' : '联检快速通道'; break;
                                        case 8: str = '贵宾休息室'; break;
                                    }
                                    return str;
                                }
                            },
                            { field: 'price', width: 90, title: '服务价格' },
                            {
                                field: 'payStatus', width: 90, title: '支付状态', templet: function (d) {
                                    var str = '';
                                    if (d.payStatus) {
                                        str = '<span class="layui-badge layui-bg-blue">已支付</span>';
                                    } else {
                                        str = '<span class="layui-badge layui-bg-gray">未支付</span>';
                                    }
                                    return str;
                                }
                            },
                            {
                                field: 'serviceStatus', width: 100, title: '服务状态', templet: function (d) {
                                    var str = '';
                                    switch (d.serviceStatus) {
                                        case 1: str = '<span class="layui-badge layui-bg-orange">已提交</span>'; break;
                                        case 2: str = '<span class="layui-badge layui-bg-blue">服务中</span>'; break;
                                        case 3: str = '<span class="layui-badge layui-bg-green">已完成</span>'; break;
                                        case 4: str = '<span class="layui-badge">已退款</span>'; break;
                                    }
                                    return str;
                                }
                            },
                            {
                                field: 'backStatus', width: 120, title: '退款状态', templet: function (d) {
                                    var str = '';
                                    switch (d.backStatus) {
                                        case 0: str = '无'; break;
                                        case 1: str = '<a href="javascript:void(0)" lay-event="lookback" class="layui-badge layui-bg-orange">申请退款</a>'; break;
                                        case 2: str = '<a href="javascript:void(0)" lay-event="lookback" class="layui-badge layui-bg-blue">同意退款</a>'; break;
                                        case 3: str = '<a href="javascript:void(0)" lay-event="lookback" class="layui-badge layui-bg-green">已驳回</a>'; break;
                                    }
                                    return str;
                                }
                            },
                            { field: 'peopleNumber', width: 80, title: '人数' },
                            // { field: 'flightNumber', width: 120, title: '航班号' },
                            // { field: 'serviceData', width: 160, title: '服务日期' },
                            // { field: 'takeOffTime', width: 160, title: '起飞时间' },
                            // { field: 'landTime', width: 160, title: '落地时间' },
                            // {
                            //     field: 'isNextDay', width: 100, title: '是否次日', templet: function(d) {
                            //         if (d.isNextDay) {
                            //             return '是';
                            //         } else {
                            //             return '<span class="layui-badge-dot layui-bg-gray"></span>';
                            //         }
                            // } },
                            // {
                            //     field: 'contactUs', width: 220, title: '联系人/方式', templet: function (d) {
                            //         if (d.contactUs.length == 0) {
                            //             return "";
                            //         } else {
                            //             var str = '';
                            //             $.each(d.contactUs, function (i, item) {
                            //                 str += '<div>姓名：' + item.name + '<span style="display: inline-block;width:30px;"></span>手机号码：' + item.phone + '</div>';
                            //             })
                            //             return str;
                            //         }
                            //     }
                            // },
                            { field: 'addTime', width: 160, title: '下单时间', fixed: 'right' },
                            {
                                width: 160, title: '操作', fixed: 'right', templet: function (d) {
                                    var str = '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="info"><i class="layui-icon layui-icon-form"></i> 详情</a>';
                                    if (d.serviceStatus > 1) {
                                        str +=
                                            '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="down"><i class="layui-icon layui-icon-download-circle"></i> 下载</a>';
                                    } else {
                                        str +=
                                            '<a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-disabled" ><i class="layui-icon layui-icon-download-circle"></i> 下载</a>';
                                    }
                                    return str;
                                }
                            }
                        ]
                    ],
                    page: true,
                    id: 'tables',
                    parseData: function (res) {
                        console.log(res);
                        return {
                            "code": res.statusCode == 200 ? 0 : res.statusCode,
                            "msg": res.message,
                            "count": res.data.totalPages,
                            "data": res.data.items
                        };
                    }
                });

                var guid = '', active = {
                    reload: function () {
                        var type = $('#types').val(), status = $('#status').val(), attr = $('#attr').val();
                        table.reload('tables',
                            {
                                page: {
                                    curr: 1
                                },
                                where: {
                                    key: $('#key').val(),
                                    time: $('#time').val(),
                                    types: !type ? 0 : type,
                                    attr: !attr ? 0 : attr,
                                    status: !status ? -1 : status
                                }
                            });
                    },
                    toolSearch: function () {
                        active.reload();
                    },
                    toolDel: function () {
                        var checkStatus = table.checkStatus('tables')
                            , data = checkStatus.data;
                        if (data.length === 0) {
                            os.error("请选择要删除的项目~");
                            return;
                        }
                        var str = '';
                        $.each(data, function (i, item) {
                            str += item.guid + ",";
                        });
                        layer.confirm('确定要执行删除操作吗？', function (index) {
                            layer.close(index);
                            var loadindex = layer.load(1, {
                                shade: [0.1, '#000']
                            });
                            os.ajax('api/tourguide/delete/', { parm: str }, function (res) {
                                layer.close(loadindex);
                                if (res.statusCode === 200) {
                                    active.reload();
                                    os.success('删除成功！');
                                } else {
                                    os.error(res.message);
                                }
                            });
                        });

                    },
                    updateStatus: function (status) {
                        var checkStatus = table.checkStatus('tables')
                            , data = checkStatus.data;
                        if (data.length === 0) {
                            os.error("请选择要操作的项目~");
                            return;
                        }
                        var str = '', urls = 'updatestatus', tips = '确定要执行批量操作吗？';
                        if (status === 4) {
                            urls = 'backmoney';
                            $.each(data,
                                function (i, item) {
                                    if (item.backStatus === 1) {
                                        str += item.guid + ",";
                                    }
                                });
                            tips = '确定要完成订单退款吗？';
                        }
                        if (status == 2) {
                            $.each(data, function (i, item) {
                                if (item.serviceStatus === 1) {
                                    str += item.guid + ",";
                                }
                            });
                            tips = '确定要接受服务吗？';
                        }
                        if (status == 3) {
                            $.each(data, function (i, item) {
                                if (item.serviceStatus === 2) {
                                    str += item.guid + ",";
                                }
                            });
                            tips = '确定要完成此订单吗？';
                        }

                        if (!str && status === 4) {
                            os.error("请选择申请退款的订单~");
                            return;
                        }
                        if (!str && status === 2) {
                            os.error("请选择服务状态为【已提交】的订单~");
                            return;
                        }
                        if (!str && status === 3) {
                            os.error("请选择服务状态为【服务中】的订单~");
                            return;
                        }
                        layer.confirm(tips, function (index) {
                            layer.close(index);
                            var loadindex = layer.load(1, {
                                shade: [0.1, '#000']
                            });
                            os.ajax('api/tourguide/' + urls + '/', { guid: str, status: status }, function (res) {
                                layer.close(loadindex);
                                if (res.statusCode === 200) {
                                    active.reload();
                                    os.success('操作成功！');
                                } else {
                                    os.error(res.message);
                                }
                            });
                        });
                    },
                    toolAccept: function () {
                        active.updateStatus(2);
                    },
                    toolBack: function () {
                        active.updateStatus(4);
                    },
                    toolSuccess: function () {
                        active.updateStatus(3);
                    },
                    toolDelete: function () {
                        active.toolDel();
                    }
                };
                $('.list-search .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
                table.on('toolbar(tool)', function (obj) {
                    active[obj.event] ? active[obj.event].call(this) : '';
                });
                //监听工具条
                table.on('tool(tool)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'down') {
                        layer.confirm('确定要下载吗？', function (index) {
                            layer.close(index);
                            var loadindex = layer.load(1, {
                                shade: [0.1, '#000']
                            });
                            os.ajax('api/tourguide/createtxt/', data, function (res) {
                                layer.close(loadindex);
                                if (res.statusCode === 200) {
                                    os.success('下载成功！');
                                    window.location.href = '/fytadmin/tourguide/order/@Model.Types?handler=down&filename=' + data.number + '.txt';
                                } else {
                                    os.error(res.message);
                                }
                            });
                        });
                    }
                    if (obj.event === 'lookback') {
                        var str = '<div>';
                        $.each(data.backProgress,
                            function (i, item) {
                                str += '<div style="padding:15px 0">时间：' + item.times + '_' + item.info + '</div>';
                            });
                        str += '</div>';
                        top.layer.open({
                            title: '退款流程'
                            , btn: []
                            , area: ['500px', '350px']
                            , content: str
                        });
                    }
                    if (obj.event === 'info') {
                        var str = '';
                        switch (data.mold) {
                            case 1: str = '普通接送-接机服务'; break;
                            case 2: str = '普通接送-送机服务'; break;
                            case 3: str = 'VIP接送=接机服务'; break;
                            case 4: str = 'VIP接送=送机服务'; break;
                            case 5: str = '登机口接送-接机服务'; break;
                            case 6: str = '登机口接送-送机服务'; break;
                            case 7: str = data.types == 1 ? '安检快速通道' : '联检快速通道'; break;
                            case 8: str = '贵宾休息室'; break;
                        }
                        data.serverName = str;
                        str = '';
                        switch (data.serviceStatus) {
                            case 1: str = '已提交'; break;
                            case 2: str = '服务中'; break;
                            case 3: str = '已完成'; break;
                            case 4: str = '已退款'; break;
                        }
                        data.serviceStatus = str;
                        vm.m = data;
                        vm.$nextTick(() => {
                            console.log(vm.m);
                            top.layer.open({
                                title: '详细'
                                , btn: []
                                , area: ['850px', '650px']
                                , content: $('.tg_info').html()
                                , success: function (layero, index) {
                                    $('.tgPrint').click(function () {
                                        var $iframe = $("<iframe  />");
                                        $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-600px", top: "-600px" });
                                        $iframe.appendTo("body");
                                        var doc = $iframe[0].contentWindow.document;
                                        doc.write("<link type='text/css' rel='stylesheet' href='/themes/layui/css/layui.css' media='print' />");
                                        doc.write($('.printHtml').html());
                                        setTimeout(() => {
                                            $iframe[0].contentWindow.print();
                                        }, 200);
                                    });
                                }
                            });
                        })

                    }
                });
            });
    </script>
</div>